题 目:Flash实用技巧之音乐时间显示篇

效果简介：
今天，笔者要教大家做一个很炫而且很实用的视觉效果。在winamp主面板的左侧，可以看到有音乐播放时间的显示，还有跳动的光谱分析器，如图1所示。本文就是讲解如何在Flash中实现这些视觉效果。本例的设计效果如图2所示。
　　
 图1，图2
同样的，这个效果中有很多技术可以应用到您的作品中。下面我们可就开始制作了。
制作步骤：
打开FlashMX。按快捷键Ctrl+F3打开“属性”，设置场景为200px×100px，黑色，帧速率12fps。
制作元件
一、制作“按钮”元件。
1．按快捷键Ctrl+F8打开“创建新元件”面板新建一个名为“按钮”的影片剪辑元件。该按钮的作用是播放音乐、停止音乐和停止光谱分析器地运行。
2．点选“窗口”菜单下“公共库”中的“按钮”选项。然后在打开的“按钮”库中找到的“Playback”文件夹，并把其中的“gel Right”拖拽到“按钮”元件第1帧的场景的中心位置上。如图3所示。点选场景中的按钮，按快捷键Ctrl+F3打开“属性”面板，给按钮起个实例名“bn1”。如图4所示。
　　
 图3 ，    图4，    图5
3．点选中“按钮”元件第2帧，按F7键插入一个空白关键帧。接着把按钮公共库的“Playback”文件夹中的“gel Stop”按钮拖拽到第2帧场景的中心位置上。也选中该按钮，在“属性”面板中起实例名“bn2”。到这里“按钮”元件就设计好了。
二、制作“光谱分析器”
“光谱分析器”是模拟winamp的。要实现开关的效果必须使用两个按钮元件，并用代码进行跳转控制。分析器中的光谱柱元件由“光柱一”和“光柱二”两个元件组成的。其具体的制作步骤如下。
制作“光柱一”元件
1．按快捷键Ctrl+F8，新建一个名为“光柱一”的影片剪辑元件。选中“工具”面板中的“矩形”工具（禁用边线）。接着用鼠标左键在“光柱一”元件的场景中绘制一个矩形。选中刚绘制出的矩形，如图5所示设置其大小以及在场景中的位置。图5中，可以看到“光柱一”的Y值为-15px。这是为了“光柱一”的底线穿过场景的中心点，使下面的设计能够正常地使用其_yscale属性。这点很重要。如图6所示。设计“光柱二”的时候也注意这个问题。
2．按快捷键Shift+F9打开“混色器”面板。在“混色器”面板的下来菜单中先选择“线性渐变”选项。“混色器”面板中两个小滑块的颜色分别是“#01B401”和“#022E01”。如图7所示。接着设置场景为“全部显示”模式（如图标）。然后选中“工具”面板中的“颜料桶”工具，然后用鼠标左键点击场景中的矩形条（上色）。见图8所示。
3．选中“工具”面板中的“填充变形”工具，然后点击场景中的矩形条。接着拖动白色空心小圆圈（旋转渐变控制点）旋转到水平位置，如图8所示。再拖动白色空心小方块（移动渐变控制点）进行范围调节，如图9所示。这样设置可以使光谱柱更加逼真。
　
图6，    图7
　
图8，    图9
制作“光柱二”元件
制作“光柱二”元件的方法和“光柱一”元件基本一样，只是其宽、高为3px和1px，如图10所示。
制作“光谱”元件
1．   按快捷键Ctrl+F8，新建一个名为“光谱”的影片剪辑元件。
2．   按快捷键Ctrl+L，打开库，把库中的“光柱一”和“光柱二”元件拖拽到场景中，如图11所示。移动元件前，可以先把场景的显示设置为400% ，这样方便移动元件。
　
 图10，          图11
3．   这一步，要先右键点击场景中的两个元件，然后打开“动作”面板，键入代码后再做。但是，本例中的代码都最后添加和讲解。但这一步有必要交代以下。现在，选中场景的两个元件，按快捷键Ctrl+C进行复制，然后再用快捷键Ctrl+V粘贴，再复制，再粘贴。最后效果如图11所示。
注意，实际上这时候每个元件中都是有代码的。在移动中，可以按快捷键Ctrl+K打开“对齐”面板帮助对齐。也可以通过缩放场景的显示比例来加速元件的移动。
制作“播放”按钮元件
1．按快捷键Ctrl+F8，新建一个名为“平台线”的影片剪辑元件。
2．由于这不是关键的制作，笔者就简要地讲以下它的制作要点。选择“矩形”工具（禁用边线），在该元件的场景中拉出一个矩形长条，然后用黑白“线性渐变”色上色。最后在矩形条上挖去一些宽为1px的间隙。最后设置如图12所示。

图12

图13

图14
3．在库中双击“平台线”影片剪辑元件，如图13所示。然后在“平台线”元件的场景中按快捷键Ctrl+A全选，接着按F8键打开“转换为元件”面板，并创建成名为“播放”的按钮元件。加入代码后，单击“播放”按钮，“光谱分析器”将会开始运行。这个功能玩过Winamp的朋友都知道。
4．在库中双击打开“播放”按钮元件，进入编辑场景。点选中“点击”帧按F6键插入关键帧。然后用“矩形”工具拉出一个矩形来覆盖原来的原来的内容。这个矩形就是该按钮的触发区域。在图14中读者可以发现“编辑多个帧” 功能被启用，这将有利于察看多个帧中元件的情况，便于编辑。
制作“返回”按钮元件
1．在库中双击“光谱”影片剪辑元件。然后在该元件的场景中按Ctrl+A全选，接着按F8键将其转换成按钮元件，名字为“返回”。加入代码后，单击“返回”按钮，“光谱分析器”将会停止。图13中是该实例的全部元件。有些元件放在文件夹里是为了方便管理和使用。
2．在库中把“平台线”的影片剪辑元件拖拽到“弹起”帧的场景中，并放置在“光谱”元件下。
3．双击打开“返回”按钮元件，进入编辑场景。同样点选中“点击”帧按F6键插入关键帧。OK。
制作“主元件”
1．按快捷键Ctrl+F8，新建一个名为“主元件”的影片剪辑元件。在库中把“播放”按钮元件拖拽到“主元件”的场景中。接着右键单击第1帧，在弹出的菜单中选择“动作”命令，然后在弹出的“动作”面板中键入代码“stop();”。其作用是该影片剪辑停止播放。
　　
 图15，    图16 

图17
2．点选“播放”按钮，起实例名为“music1”。如图15所示。
3．点选中第2帧，按F7键插入空白关键帧。在库中把“返回”按钮元件拖拽到第帧的场景中。并同样在帧中键入代码“stop();”。第1和第2帧中元件的位置应该保持一致。
4．点选“返回”按钮，起实例名为“music2”。
三、导入音乐
1．按快捷键Ctrl+R打开“导入”面板，导入一首MP3歌曲。建议大家先选择文件小一点的歌，越小越好，否则经常在测试的时候等待，浪费时间。
2．打开库，双击库中前面是个小喇叭图标的声音文件打开“声音属性”面板，然后如图16所示设置。这样会使导出的文件变得很小。
3．右键单击库中的声音文件，在弹出的菜单中选择“链接...”命令，打开“链接属性”面板，并如图17进行设置。为声音创建标识符为“music”，以便用程序将其导出使用。
设计主场景
设计主场景之前，先看看主场景中都有哪些东西，有什么作用。如图18所示。中间两个虚线矩形框就是两个动态文本。中间是一个输入冒号的静态文本。有一个装饰用的小三角。最下面的是“主元件”和“按钮”元件，这两个元件的功能前面已经讲过了。这两个动态文本的作用是显示音乐当前的播放时间。他们的制作方法如下。
1．点选“工具”面板中的文本工具，如图19所示设置“属性”面板。实例中的字体笔者已经压缩在源文件中了，读者可自行下载。关键是一定要给该动态文本起个实例名称“text1”。接着使用“矩形”工具在主场景中拉出一个动态文本，即图18左侧的虚线部分。

 图18

图19
2．再制作一个动态文本“text2”，即图18右侧的虚线部分。方法同上。
3．在两个动态文本之间再设计一个静态文本，并输入一个冒号。
4．在库中把“主元件”和“按钮”这两个影片剪辑元件拖拽到如图18所示的相应位置即可。并给“主元件”起个实例名称“mc”。这很重要，是为了使“按钮”元件能够控制它。
设计代码
这部分是本文的重点，也是精华，希望大家花点心思研究一下。
1．右键单击主场景的第1帧，在弹出菜单中选择“动作”命令，然后在打开的“动作”面板中键入如下代码。这段代码主要是创建一个声音对象和两个全局函数。
// 创建新的Sound对象
mysound = new Sound();
// 把在库中建立链接的声音附加到mySound对象中
mysound.attachSound("music");
// 隐藏动态文本“text1”，使得声音没有播放时“光谱分析器”的条件不满足而不能工作_root.text1._visible = 0;
// 使用_global对象来创建全局函数stsrt_fun
// stsrt_fun函数的作用是播放声音、显示时间
_global.start_fun = function() {
// 播放声音
mysound.start();
// 初始化两个动态文本的内容为“00”
    _root.text1.text = _root.text2.text = "00";
// 定义fun函数，用来显示时间
    function fun() {
// Math对象的floor方法返回小于等于指定参数的整数
// Sound对象中的position属性返回声音已播放的毫秒数
// 变量x纪录了声音已经播放的时间
        x = Math.floor(mysound.position/1000);
// 根据分秒的关系，显示文本的内容
// TextField对象的text属性可以设定文本内容
        if (x<10) {
            _root.text1.text = "00";
            _root.text2.text = "0" + x;
        } else if (x>=10 && x<60) {
            _root.text1.text = "00";
            _root.text2.text = x;
        } else if (x<600) {
            if (x%60<10) {
                _root.text1.text = "0" + Math.floor(x/60);
                _root.text2.text = "0" + x%60;
            } else if (x%60>=10) {
                _root.text1.text = "0" + Math.floor(x/60);
                _root.text2.text = x%60;
           }
        }
    }
// 每隔1000毫秒调用一次fun函数
    setInterval(fun, 1000);
// 循环播放声音
    mysound.onSoundComplete = start_fun;
}
// 定义全局函数stop_fun，作用是停止播放声音
_global.stop_fun = function() {
    mysound.stop();
}
2．进入“主元件”的编辑场景。右键单击“主元件”场景中的第1帧，在弹出菜单中选择“动作”命令，在打开的“动作”面板中键入如下代码。这段代码的作用是“music 1”按钮被点击后，如果动态文本没有被隐藏，则跳转到第2帧。
stop();
music1.onRelease =function() {
if ( _root.text1._visible == 1 ) {
     gotoAndStop(2);
}
}
在打开的“动作”面板中键入如下代码。
右键单击场景中的第2帧，在“动作”面板中键入如下代码。该代码的作用是“music2”按钮被点击后，返回到到第1帧。
stop();
music2.onRelease = function() {
    gotoAndStop(1);
}
3．进入“按钮”影片剪辑元件的编辑场景。右键单击场景中第1帧，在“动作”面板中键入如下代码。这段代码的作用是“bn1”按钮被点击后，显示动态文本，执行start_fun函数，然后跳转到第2帧。
stop();
bn1.onRelease = function() {
    _root.text1._visible = 1;
    _root.text2._visible = 1;
    start_fun();
    gotoAndStop(2);
}
右键单击场景中的第2帧，在“动作”面板中键入如下代码。该代码的作用是点击“bn2”按钮后，先调用stop_fun函数。接着隐藏两个动态文本并让“mc”实例（即“主元件”）返回其场景的第1帧。最后“按钮”影片剪辑元件也返回到其场景的第1帧停止。
stop();
bn2.onRelease = function() {
    stop_fun();
    _root.text1._visible = 0;
    _root.text2._visible = 0;
    _root.mc.gotoAndStop(1);
    gotoAndStop(1);
}
4．打开库，双击“光谱”元件。在其场景中选中“光柱二”元件，按F9键打开“动作”面板，键入如下代码。代码中随机数值的大小可以随意设置。但要注意“光柱二”和“光柱一”元件之间的距离。
// _alpha是影片剪辑的透明度属性
// _yscale属性的作用是使影片剪辑在垂直方向上进行缩放
// Math对象的random方法返回一个大于等于0而小于1的数字。“ramdom(90)”的用法已经不被建议了
onClipEvent (enterFrame) {
    _alpha = Math.random()*60 + 40;
    _yscale = Math.random()*90 + 10;
}
选中场景中的“光柱一”元件，按F9键打开“动作”面板，键入如下代码。
// _y是影片剪辑的（Y）轴坐标属性
onClipEvent (enterFrame) {
    _y = -Math.random()*6 - 12;
}
好了，整个效果到这里就设计完成了。测试一下，应该会让你自己吃惊不小的。在效果中，读者可以使用电子表中的显示字体，这样，效果看起来就更逼真些。